<template>
  <mt-tabbar fixed class="tab" id="footer">
    <mt-tab-item id="资讯" :class="{'active':readColor}"  @click.native="changeToPath('home')">
      <img slot="icon" class="icon" src="../../assets/icon-home.png" v-if="!readColor">
      <img slot="icon" class="icon" src="../../assets/icon-home-light.png" v-else>
      资讯
    </mt-tab-item>
    <mt-tab-item id="视频" :class="{'active':orderColor}"  @click.native="changeToPath('video')">
      <img slot="icon" class="icon" src="../../assets/icon-video.png"  v-if="!orderColor">
      <img slot="icon" class="icon" src="../../assets/icon-video-light.png" v-else>
      视频
    </mt-tab-item>
    <mt-tab-item id="我的" :class="{'active':renColor}"  @click.native="changeToPath('account')">
      <img slot="icon" class="icon" src="../../assets/icon-ren.png"  v-if="!renColor">
      <img slot="icon" class="icon" src="../../assets/icon-ren-light.png" v-else>
      我的
    </mt-tab-item>
  </mt-tabbar>
</template>

<script>
export default {  
  data(){
    return{
      readColor : true,
      orderColor : false,
      renColor : false
    }
  },
  mounted(){
    if( this.$route.name == 'home' ){
      this.homeClass();
    }
    if( this.$route.name == 'video' ){
      this.videoClass();
    }
    if( this.$route.name == 'account' ){
      this.accountClass();
    }
  },
  watch:{
    '$route'(to, from){
      if( to.name == 'home' ){
        this.homeClass();
      }
      if( to.name == 'video' ){
        this.videoClass();
      }
      if( to.name == 'account' ){
        this.accountClass();
      }
    }
  },
  methods:{
    changeToPath(name){
      this.$router.push({path:`/${name}`}); 
    },
    homeClass(){
      this.readColor = true;     
      this.orderColor = false;
      this.renColor = false;
    },
    videoClass(){
      this.readColor = false;     
      this.orderColor = true;
      this.renColor = false; 
    },
    accountClass(){
      this.readColor = false;     
      this.orderColor = false;
      this.renColor = true; 
    }
  }
}
</script>

<style lang="stylus" scoped>
.tab{
  max-width:750px;
  height:50px;
  margin:0 auto;
  border-top: 1px solid #F2F3F9;
  background: #fff;
  &.is-fixed{
    position:absolute;
    bottom:0;
  }
  img{
    width:22px;
    height:22px;
  }
}
</style>